<script setup>
import { ref, getCurrentInstance } from "vue"

// websocket
const { proxy } = getCurrentInstance()
const wsRecvMsg = ref("")
proxy.wsWrapper.getEmitter().on("ws-message", (msg) => {
  console.log("wsEmitter.on:ws-message", msg)
  wsRecvMsg.value = msg
})
</script>

<template>
  <div class="number-range-demo" style="text-align: start;">
    <div class="ws-recv-msg">NumberRangeDemo's websocket message: {{wsRecvMsg}}</div>

    <el-form-item label="Input Number in range [10 - 20]">
      <input type="number" class="number-range-input" v-number-range="[10, 20]" />
    </el-form-item>
  </div>
</template>

<style lang="scss" scoped>
.ws-recv-msg {
  background: #444;
  margin-bottom: 20px;
  text-align: start;
  padding: 10px;
}
</style>
